<template>
  <div class="wrapper">
    <!-- v-if 保证了数据没有传过来的时候 swiper 不会被创建-->
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="item of list" :key="item.id">
        <img
          class="swiper-img"
          :src="item.imgURL"
        />
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>

</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style scoped lang="stylus">
  // >>> 样式穿透 不受 scoped 影响
  .wrapper >>> .swiper-pagination-bullet-active
    background #ffffff !important;
  .wrapper
    width 100%
    height 0
    overflow hidden
    // overflow:hidden + height: 0 + width: 100% + padding-bottom: 31.25% 意思是图片容器会一直占据一定的高度
    // 在图片未加载时，容器高度为0，高度通过 padding 撑开，因为 padding 百分比是根据宽度来计算的
    // 图片加载以后，高度出现（撑开），因为有 overflow:hidden，所以 padding 的效果就被图片代替了
    // 这么做是为了防止轮播图下面的内容在图片没有加载完成的时候跑到上面去，加载完后又掉下来，给用户不好的体验
    padding-bottom 26.125%
    .swiper-img
      width 100%
</style>
